React useFormStatus Async Validation: การอัปเดตสถานะฟอร์มแบบ Asynchronous

ในการพัฒนาเว็บสมัยใหม่ ฟอร์มเป็นองค์ประกอบสำคัญสำหรับการโต้ตอบกับผู้ใช้ การตรวจสอบความถูกต้องของข้อมูลและการให้ข้อเสนอแนะแบบเรียลไทม์เป็นสิ่งสำคัญยิ่งต่อประสบการณ์ผู้ใช้ที่ดี useFormStatus hook ของ React ซึ่งเปิดตัวใน React 18 นำเสนอวิธีที่มีประสิทธิภาพและสวยงามในการจัดการสถานะของการส่งฟอร์ม โดยเฉพาะอย่างยิ่งเมื่อจัดการกับการตรวจสอบแบบ asynchronous บทความนี้จะเจาะลึกถึงความซับซ้อนของ useFormStatus โดยเน้นที่สถานการณ์การตรวจสอบแบบ asynchronous โดยให้ตัวอย่างเชิงปฏิบัติและสรุปแนวทางปฏิบัติที่ดีที่สุดเพื่อสร้างฟอร์มที่แข็งแกร่งและใช้งานง่าย

ทำความเข้าใจพื้นฐานของ useFormStatus

useFormStatus hook ให้ข้อมูลเกี่ยวกับการส่งฟอร์มครั้งล่าสุดที่ทริกเกอร์ <button> หรือ <input type="submit"> ภายใน <form> โดยจะคืนค่าอ็อบเจ็กต์ที่มีคุณสมบัติดังต่อไปนี้:

• pending: บูลีนที่ระบุว่าการส่งฟอร์มกำลังรอดำเนินการอยู่หรือไม่
• data: ข้อมูลที่เกี่ยวข้องกับการส่งฟอร์ม หากมี
• method: วิธี HTTP ที่ใช้สำหรับการส่งฟอร์ม (เช่น 'get' หรือ 'post')
• action: ฟังก์ชันที่ใช้เป็นการกระทำของฟอร์ม

แม้จะดูเรียบง่าย แต่ useFormStatus จะมีค่าอย่างเหลือเชื่อเมื่อจัดการกับปฏิบัติการแบบ asynchronous เช่น การตรวจสอบอินพุตของผู้ใช้กับเซิร์ฟเวอร์ระยะไกล หรือทำการแปลงข้อมูลที่ซับซ้อนก่อนการส่ง

ความจำเป็นในการตรวจสอบแบบ Asynchronous

การตรวจสอบแบบ synchronous แบบดั้งเดิม ซึ่งการตรวจสอบจะดำเนินการทันทีภายในเบราว์เซอร์ มักจะไม่เพียงพอสำหรับการใช้งานจริง พิจารณาสถานการณ์เหล่านี้:

• ความพร้อมใช้งานของชื่อผู้ใช้: การตรวจสอบว่ามีการใช้ชื่อผู้ใช้นั้นแล้วหรือไม่ จำเป็นต้องมีการค้นหาฐานข้อมูล
• การตรวจสอบอีเมล: การส่งอีเมลตรวจสอบและการยืนยันความถูกต้องนั้นจำเป็นต้องมีการโต้ตอบทางฝั่งเซิร์ฟเวอร์
• การประมวลผลการชำระเงิน: การตรวจสอบรายละเอียดบัตรเครดิตเกี่ยวข้องกับการสื่อสารกับเกตเวย์การชำระเงิน
• การเติมข้อความอัตโนมัติของที่อยู่: การแนะนำตัวเลือกที่อยู่เมื่อผู้ใช้พิมพ์ จำเป็นต้องเรียก API ภายนอก

สถานการณ์เหล่านี้เกี่ยวข้องกับปฏิบัติการแบบ asynchronous โดยธรรมชาติ useFormStatus ร่วมกับฟังก์ชัน asynchronous ช่วยให้เราจัดการการตรวจสอบเหล่านี้ได้อย่างสวยงาม โดยให้ข้อเสนอแนะทันทีแก่ผู้ใช้โดยไม่บล็อก UI

การใช้งานการตรวจสอบแบบ Asynchronous ด้วย useFormStatus

มาสำรวจตัวอย่างเชิงปฏิบัติของการตรวจสอบความพร้อมใช้งานของชื่อผู้ใช้แบบ asynchronous กัน

ตัวอย่าง: การตรวจสอบชื่อผู้ใช้แบบ Asynchronous

ขั้นแรก เราจะสร้างคอมโพเนนต์ React อย่างง่ายด้วยฟอร์มและปุ่มส่ง

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เราใช้ useState เพื่อจัดการค่าอินพุตชื่อผู้ใช้
• ฟังก์ชัน handleSubmit จำลองการเรียก API แบบ asynchronous เพื่อตรวจสอบความพร้อมใช้งานของชื่อผู้ใช้ (แทนที่ด้วยการเรียก API จริงของคุณ)
• เราใช้ promise และ setTimeout เพื่อจำลองคำขอเครือข่ายที่ใช้เวลา 1 วินาที
• มีการตรวจสอบความพร้อมใช้งานแบบจำลอง โดยที่ชื่อผู้ใช้ "taken" เท่านั้นที่ไม่พร้อมใช้งาน
• useFormStatus hook ถูกใช้ใน `StatusComponent` แยกต่างหากเพื่อแสดงข้อเสนอแนะ
• เราใช้ isPending เพื่อปิดใช้งานปุ่มส่งและแสดงข้อความ "Checking..." ขณะที่การตรวจสอบกำลังดำเนินการอยู่

คำอธิบาย

The `useFormStatus` hook ให้ข้อมูลเกี่ยวกับการส่งฟอร์มครั้งล่าสุด โดยเฉพาะอย่างยิ่ง คุณสมบัติ `pending` เป็นบูลีนที่ระบุว่าฟอร์มกำลังส่งอยู่หรือไม่ คุณสมบัติ `data` หากมี จะมีข้อมูลฟอร์ม คุณสมบัติ `action` ส่งคืนฟังก์ชันที่ใช้เป็นการกระทำของฟอร์ม

เทคนิคขั้นสูงและแนวทางปฏิบัติที่ดีที่สุด

1. Debouncing เพื่อปรับปรุงประสิทธิภาพ

ในสถานการณ์ที่ผู้ใช้กำลังพิมพ์อย่างรวดเร็ว เช่น ระหว่างการตรวจสอบชื่อผู้ใช้หรืออีเมล การทริกเกอร์การเรียก API ในทุกการกดแป้นอาจไม่มีประสิทธิภาพและอาจทำให้เซิร์ฟเวอร์ของคุณโอเวอร์โหลดได้ Debouncing เป็นเทคนิคในการจำกัดอัตราการเรียกใช้ฟังก์ชัน ใช้งานฟังก์ชัน debouncing เพื่อชะลอการตรวจสอบจนกว่าผู้ใช้จะหยุดพิมพ์ในช่วงเวลาที่กำหนด

            import React, { useState, useCallback, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  // Debounce function
  const debounce = (func, delay) => {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        func(...args);
      }, delay);
    };
  };

  const debouncedHandleSubmit = useCallback(
    debounce(async (formData) => {
      "use server";
      const username = formData.get('username');

      // Simulate an API call to check username availability
      await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency

      const isAvailable = username !== 'taken'; // Mock availability check

      if (!isAvailable) {
        throw new Error('Username is already taken.');
      }

      console.log('Username is available!');
      // Perform actual form submission here
    }, 500), // 500ms delay
    []
  );

  return (
    <form action={debouncedHandleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              
                Copy
              
            
          

ในตัวอย่างที่ปรับปรุงนี้:

• เราได้ใช้งานฟังก์ชัน debounce ที่ชะลอการดำเนินการของ handleSubmit
• useCallback hook ถูกใช้เพื่อ memoize ฟังก์ชัน debounced เพื่อป้องกันการสร้างใหม่ในทุกการเรนเดอร์
• การเรียก API จะถูกทริกเกอร์ก็ต่อเมื่อผู้ใช้หยุดพิมพ์เป็นเวลา 500ms เท่านั้น

2. Throttling สำหรับการจำกัดอัตรา

ในขณะที่ debouncing ป้องกันการเรียก API ที่มากเกินไปในช่วงเวลาสั้นๆ throttling ช่วยให้มั่นใจได้ว่าฟังก์ชันจะถูกเรียกในระยะเวลาปกติ สิ่งนี้มีประโยชน์เมื่อคุณต้องการดำเนินการตรวจสอบบางอย่างเป็นประจำ แต่คุณไม่ต้องการทำให้เซิร์ฟเวอร์ของคุณโอเวอร์โหลด ตัวอย่างเช่น การจำกัดความถี่ของการเรียก API ต่อนาที

3. การอัปเดตแบบ Optimistic

การอัปเดตแบบ Optimistic ปรับปรุงประสบการณ์ผู้ใช้โดยการอัปเดต UI ทันทีราวกับการส่งฟอร์มสำเร็จ แม้กระทั่งก่อนที่เซิร์ฟเวอร์จะยืนยัน สิ่งนี้สร้างการรับรู้ถึงเวลาตอบสนองที่เร็วขึ้น อย่างไรก็ตาม การจัดการข้อผิดพลาดที่อาจเกิดขึ้นอย่างสวยงามเป็นสิ่งสำคัญ หากการตรวจสอบทางฝั่งเซิร์ฟเวอร์ล้มเหลว ให้คืนค่า UI เป็นสถานะก่อนหน้าและแสดงข้อความแสดงข้อผิดพลาด

4. การจัดการข้อผิดพลาดและข้อเสนอแนะผู้ใช้

ให้ข้อความแสดงข้อผิดพลาดที่ชัดเจนและให้ข้อมูลแก่ผู้ใช้เมื่อการตรวจสอบล้มเหลว ระบุว่าฟิลด์ใดทำให้เกิดข้อผิดพลาดและแนะนำการดำเนินการแก้ไข พิจารณาแสดงข้อความแสดงข้อผิดพลาดแบบอินไลน์ ใกล้กับฟิลด์อินพุตที่เกี่ยวข้อง เพื่อการมองเห็นที่ดีขึ้น

5. ข้อควรพิจารณาด้านการเข้าถึง

ตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ ใช้แอตทริบิวต์ ARIA ที่เหมาะสมเพื่อให้ข้อมูลเชิงความหมายเกี่ยวกับองค์ประกอบฟอร์มและสถานะขององค์ประกอบเหล่านั้น ตัวอย่างเช่น ใช้ aria-invalid เพื่อระบุฟิลด์อินพุตที่ไม่ถูกต้อง และ aria-describedby เพื่อเชื่อมโยงข้อความแสดงข้อผิดพลาดกับฟิลด์ที่เกี่ยวข้อง

6. การทำให้เป็นสากล (i18n)

เมื่อพัฒนาฟอร์มสำหรับผู้ชมทั่วโลก ให้พิจารณาการทำให้เป็นสากล ใช้ไลบรารีเช่น i18next หรือ React Intl เพื่อให้ข้อความแสดงข้อผิดพลาดที่แปลและปรับรูปแบบฟอร์มให้เข้ากับภาษาและรูปแบบทางวัฒนธรรมที่แตกต่างกัน ตัวอย่างเช่น รูปแบบวันที่และฟิลด์ที่อยู่แตกต่างกันไปในแต่ละประเทศ

7. แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย

ดำเนินการตรวจสอบทางฝั่งเซิร์ฟเวอร์เสมอนอกเหนือจากการตรวจสอบทางฝั่งไคลเอ็นต์ การตรวจสอบทางฝั่งไคลเอ็นต์มีไว้สำหรับประสบการณ์ผู้ใช้เป็นหลักและสามารถถูกข้ามได้ การตรวจสอบทางฝั่งเซิร์ฟเวอร์ปกป้องแอปพลิเคชันของคุณจากอินพุตที่เป็นอันตรายและรับประกันความสมบูรณ์ของข้อมูล ฆ่าเชื้ออินพุตของผู้ใช้เพื่อป้องกันการโจมตีแบบ cross-site scripting (XSS) และช่องโหว่ด้านความปลอดภัยอื่นๆ ใช้ Content Security Policy (CSP) เพื่อป้องกันการโจมตีแบบ XSS

8. การจัดการวิธีการส่งฟอร์มที่แตกต่างกัน

The useFormStatus hook ทำงานได้ดีกับทั้งวิธีการ GET และ POST คุณสมบัติ `method` ของอ็อบเจ็กต์ที่ส่งคืนจะมีวิธีการ HTTP ที่ใช้ในการส่งฟอร์ม ตรวจสอบให้แน่ใจว่าตรรกะทางฝั่งเซิร์ฟเวอร์ของคุณจัดการทั้งสองวิธีอย่างเหมาะสม คำขอ GET โดยทั่วไปจะใช้สำหรับการดึงข้อมูลอย่างง่าย ในขณะที่คำขอ POST จะใช้สำหรับการสร้างหรือแก้ไขข้อมูล

9. การผสานรวมกับไลบรารีฟอร์ม

ในขณะที่ useFormStatus มีกลไกพื้นฐานสำหรับการจัดการสถานะการส่งฟอร์ม คุณสามารถรวมเข้ากับไลบรารีฟอร์มที่ครอบคลุมมากขึ้น เช่น Formik, React Hook Form หรือ Final Form ไลบรารีเหล่านี้มีคุณสมบัติขั้นสูง เช่น การจัดการสถานะฟอร์ม กฎการตรวจสอบ และการจัดการข้อผิดพลาดระดับฟิลด์ ใช้ useFormStatus เพื่อปรับปรุงประสบการณ์ผู้ใช้ระหว่างการตรวจสอบแบบ asynchronous ภายในไลบรารีเหล่านี้

10. การทดสอบการตรวจสอบแบบ Asynchronous

เขียน unit tests เพื่อตรวจสอบว่าตรรกะการตรวจสอบแบบ asynchronous ของคุณทำงานอย่างถูกต้อง จำลองการเรียก API โดยใช้ไลบรารีเช่น Jest และ Mock Service Worker (MSW) ทดสอบทั้งสถานการณ์ที่สำเร็จและข้อผิดพลาดเพื่อให้แน่ใจว่าฟอร์มของคุณจัดการทุกกรณีได้อย่างสวยงาม นอกจากนี้ ให้ทดสอบคุณสมบัติการเข้าถึงของฟอร์มของคุณเพื่อให้แน่ใจว่าผู้พิการสามารถใช้งานได้

ตัวอย่างจริงจากทั่วโลก

มาตรวจสอบว่าการตรวจสอบแบบ asynchronous ถูกใช้อย่างไรในสถานการณ์จริงต่างๆ ทั่วโลก:

• E-commerce (ทั่วโลก): เมื่อผู้ใช้พยายามลงทะเบียนบนแพลตฟอร์มอีคอมเมิร์ซเช่น Amazon, eBay หรือ Alibaba ระบบมักจะทำการตรวจสอบแบบ asynchronous เพื่อตรวจสอบว่ามีการใช้อีเมลแอดเดรสแล้วหรือไม่ หรือรหัสผ่านที่เลือกเป็นไปตามข้อกำหนดด้านความปลอดภัยหรือไม่ แพลตฟอร์มเหล่านี้ใช้เทคนิคต่างๆ เช่น debouncing และ throttling เพื่อหลีกเลี่ยงการโอเวอร์โหลดเซิร์ฟเวอร์ในช่วงเวลาลงทะเบียนสูงสุด
• โซเชียลมีเดีย (ทั่วโลก): แพลตฟอร์มโซเชียลมีเดียเช่น Facebook, Twitter และ Instagram ใช้การตรวจสอบแบบ asynchronous เพื่อให้แน่ใจว่าชื่อผู้ใช้ไม่ซ้ำกันและเป็นไปตามหลักเกณฑ์ของแพลตฟอร์ม พวกเขายังตรวจสอบเนื้อหาของโพสต์และความคิดเห็นเพื่อตรวจจับสแปม ภาษาที่หยาบคาย และการละเมิดลิขสิทธิ์
• บริการทางการเงิน (ระหว่างประเทศ): ธนาคารออนไลน์และแพลตฟอร์มการลงทุนใช้การตรวจสอบแบบ asynchronous เพื่อตรวจสอบข้อมูลประจำตัวผู้ใช้ ประมวลผลธุรกรรม และป้องกันการฉ้อโกง พวกเขาอาจใช้วิธีการตรวจสอบสิทธิ์แบบหลายปัจจัย (MFA) ที่เกี่ยวข้องกับการส่งรหัส SMS หรือการแจ้งเตือนแบบพุชไปยังอุปกรณ์ของผู้ใช้ การตรวจสอบแบบ asynchronous เป็นสิ่งสำคัญสำหรับการรักษาความปลอดภัยและความสมบูรณ์ของระบบเหล่านี้
• การจองการเดินทาง (ข้ามทวีป): ไซต์จองการเดินทางเช่น Booking.com, Expedia และ Airbnb ใช้การตรวจสอบแบบ asynchronous เพื่อตรวจสอบความพร้อมใช้งานของเที่ยวบิน โรงแรม และรถเช่า พวกเขายังตรวจสอบข้อมูลการชำระเงินและประมวลผลการจองแบบเรียลไทม์ แพลตฟอร์มเหล่านี้จัดการข้อมูลจำนวนมากและต้องการกลไกการตรวจสอบแบบ asynchronous ที่แข็งแกร่งเพื่อให้มั่นใจในความถูกต้องและความน่าเชื่อถือ
• บริการภาครัฐ (ระดับชาติ): หน่วยงานภาครัฐทั่วโลกใช้การตรวจสอบแบบ asynchronous ในพอร์ทัลออนไลน์เพื่อให้ประชาชนสามารถสมัครขอรับสวัสดิการ ยื่นภาษี และเข้าถึงบริการสาธารณะ พวกเขาตรวจสอบข้อมูลประจำตัวผู้ใช้ ตรวจสอบเกณฑ์คุณสมบัติ และประมวลผลแอปพลิเคชันทางอิเล็กทรอนิกส์ การตรวจสอบแบบ asynchronous เป็นสิ่งจำเป็นสำหรับการปรับปรุงกระบวนการเหล่านี้และลดภาระด้านการบริหาร

สรุป

การตรวจสอบแบบ Asynchronous เป็นเทคนิคที่ไม่สามารถขาดได้สำหรับการสร้างฟอร์มที่แข็งแกร่งและใช้งานง่ายใน React โดยการใช้ประโยชน์จาก useFormStatus, debouncing, throttling และเทคนิคขั้นสูงอื่นๆ คุณสามารถให้ข้อเสนอแนะแบบเรียลไทม์แก่ผู้ใช้ ป้องกันข้อผิดพลาด และปรับปรุงประสบการณ์การส่งฟอร์มโดยรวม อย่าลืมจัดลำดับความสำคัญของการเข้าถึง ความปลอดภัย และการทำให้เป็นสากลเพื่อสร้างฟอร์มที่ทุกคนสามารถใช้งานได้ทุกที่ ทดสอบและตรวจสอบฟอร์มของคุณอย่างต่อเนื่องเพื่อให้แน่ใจว่าฟอร์มเหล่านั้นตรงกับความต้องการที่เปลี่ยนแปลงไปของผู้ใช้และความต้องการของแอปพลิเคชันของคุณ